<template>
  <a-spin style="width: 100%; height: 260px">
    <a-card title="发电实时" style="height: 250px">
      <div ref="chartRef" style="height: 140px"></div>
    </a-card>
  </a-spin>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { getRuntimeInfo } from '../../../apis/home-pv'

const chartRef = ref<HTMLDivElement | null>(null)
const renderData = ref<any>(0)
const chartInstance = ref<any>(null)

const fetchData = async () => {
  const res = await getRuntimeInfo()
  if (res.data.code == 200) {
    renderData.value = res.data.data
    initEchart(res.data.data.dashboardInfo.value)
  }
}

const initEchart = (data: any) => {
  const el = chartRef.value
  if (!el) return
  chartInstance.value = echarts.init(el)

  const option: any = {
    series: [
      {
        type: 'liquidFill',
        radius: '110px',
        center: ['50%', '50%'],
        amplitude: 10,
        data: [data],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#446bf5' },
              { offset: 1, color: '#2ca3e2' }
            ],
            globalCoord: false
          }
        ],
        backgroundStyle: {
          borderWidth: 1,
          color: 'RGBA(51, 66, 127, 0.7)'
        },
        label: {
          normal: {
            color: '#fff',
            insideColor: 'transparent',
            textStyle: { fontSize: 26, fontWeight: 'bold' }
          }
        },
        outline: {
          show: true,
          borderDistance: 5,
          itemStyle: { borderColor: 'rgba(67,209,100,1)', borderWidth: 0 }
        }
      }
    ]
  }

  chartInstance.value.setOption(option)
}

onMounted(async () => {
  await fetchData()
})
</script>